<!--
 * @Description: el-select下拉框互斥
 * @Author: your name
 * @Date: 2023-06-30
 * @LastEditTime: 2023-06-30
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="page">
    <h1 class="text-primary">单选</h1>
    <el-form label-width="80px" :key="0">
      <el-form-item
        label="选择人员"
        v-for="(item, index) in arraySin"
        :key="index"
      >
        <el-select v-model="item.valueChecked" placeholder="请选择" clearable>
          <el-option
            v-for="(jitem, jindex) in options"
            :key="jindex"
            :label="jitem.label"
            :value="jitem.value"
            :disabled="setDisabledSin(jitem, index)"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <h1 class="text-primary">多选</h1>
    <el-form label-width="80px" :key="1">
      <el-form-item
        label="选择人员"
        v-for="(item, index) in arrayMuti"
        :key="index"
      >
        <el-select
          v-model="item.valueChecked"
          multiple
          placeholder="请选择"
          clearable
          collapse-tags
        >
          <el-option
            v-for="(jitem, jindex) in options"
            :key="jindex"
            :label="jitem.label"
            :value="jitem.value"
            :disabled="setMulDisabledMuti(jitem, index)"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'DemoTwo',
  data() {
    return {
      // 存储选中项
      arraySin: [
        {
          valueChecked: ''
        },
        {
          valueChecked: ''
        },
        {
          valueChecked: ''
        }
      ],
      // 存储选中项
      arrayMuti: [
        {
          valueChecked: []
        },
        {
          valueChecked: []
        },
        {
          valueChecked: []
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ]
    }
  },
  computed: {
    setDisabledSin() {
      return function(opt, index) {
        // opt为每项option，index为el-select索引
        // 全部已选择
        const selectedArr = this.arraySin.map(item => item.valueChecked)
        // 删除自己的已选
        selectedArr.splice(index, 1)
        // 其它的已选，禁用
        return selectedArr.includes(opt.value)
      }
    },
    setMulDisabledMuti() {
      return function(opt, index) {
        // 全部已选择
        const tempArr = this.arrayMuti.map(item => item.valueChecked)
        // 先删除自己的已选
        tempArr.splice(index, 1)
        // 转为一维数组
        const selectedArr = tempArr.flat();
        // 其它的已选，禁用
        return selectedArr.includes(opt.value)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
